<template>
  <div class="jgld ">
    <div class="jgld-top">
      <div class="back" @click="goBack"></div>
    </div>
    <div class="jgld-box betweenbox">
      <div class="jgld-left betweenbox">
      <div class="modetop">
        <div class="mode1 borderStyle">
          <Gjxx />
        </div>
        <div class="mode2 borderStyle">
          <Gzp />
        </div>
        <div class="mode3 borderStyle">
          <Ldkzxx :Ldkzxx="Ldkzxx" />
        </div>
        <div class="mode4 borderStyle">
          <Hjxx />
        </div>
      </div>

      <div class="mode5 borderStyle">
        <Gisjf :pointData="pointByGisJf" :BAYNAME="BAYNAME" />
      </div>
      <div class="mode6 borderStyle">
        <Sf6jc :pointData="pointBySf6jc" :BAYNAME="BAYNAME" />
      </div>
      <div class="gdpf-btn centerbox">
        <el-button type="primary" @click="paidan">工单派发</el-button>
      </div>
    </div>
    <div class="jgld-right">
      <Sp ref="right" />
    </div>
    </div>
    <el-dialog :visible.sync="showGdpf" title="工单派发">
      <gdpf :data="currentRow" v-if="showGdpf" @saveend="saveend" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import Gisjf from "./JGLianDongModules/Gisjf.vue";
import Gjxx from "./JGLianDongModules/Gjxx.vue";
import Gzp from "./JGLianDongModules/Gzp.vue";
import Ldkzxx from "./JGLianDongModules/Ldkzxx.vue";
import Sf6jc from "./JGLianDongModules/Sf6jc.vue";
import Sp from "./JGLianDongModules/Sp.vue";
import Hjxx from "./JGLianDongModules/Hjxx.vue";
import gdpf from "./gdpf.vue";

@Component({ components: { Gisjf, Gjxx, Gzp, Ldkzxx, Sf6jc, Sp, Hjxx, gdpf } })
export default class extends Vue {
  $refs!: {
    right: Sp;
  };
  get PointByBdz() {
    let getterAllAuxiliaryByStationId =
      GetSocketModule.getterAllAuxiliaryByStationId;
    let PointByBdz = getterAllAuxiliaryByStationId[this.stationId] || [];
    return PointByBdz;
  }
  get pointByBayId() {
    let PointByBdz = this.PointByBdz || [];
    let pointByBayId = [];
    PointByBdz.forEach((v) => {
      let bayId = v.bayId;
      let remoteType = v.remoteType;
      if (bayId === this.BAYID && remoteType !== "2") {
        v.myJcz = (v.value || "") + (v.unit || "");
        pointByBayId.push(v);
      }
    });
    console.log(pointByBayId);
    return pointByBayId;
  }
  get pointByGisJf() {
    let code = "0303";
    let pointByBayId = this.pointByBayId || [];
    let pointByGisJf = [];
    pointByBayId.forEach((v) => {
      let deviceType = v.deviceType;
      if (deviceType === code) {
        pointByGisJf.push(v);
      }
    });
    pointByGisJf=pointByGisJf.sort((a,b)=>(a.status-b.status))
    return pointByGisJf;
  }
  get pointBySf6jc() {
    // let code = "0303";
    let code = "0305";
    let pointByBayId = this.pointByBayId || [];
    let pointBySf6jc = [];
    pointByBayId.forEach((v) => {
      let deviceType = v.deviceType;
      if (deviceType === code) {
        pointBySf6jc.push(v);
      }
    });
    pointBySf6jc=pointBySf6jc.sort((a,b)=>(a.status-b.status))
    return pointBySf6jc;
  }
  mounted() {
    this.setCurrentData();
    this.fetch(this.$route.query.myId);
  }
  Ldkzxx = {};
  fetch(id) {
    var params: any = {
      id: id,
    };
    // console.log(params);
    (this as any).$services
      .getLinkageParticulars({ method: "post", data: params, postparams: true })
      .then((result: any) => {
        console.log(result.data);
        if (result.data) {
          this.Ldkzxx = result.data;
          this.setVideoData(result.data);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 设置视频播放数据
  setVideoData(data) {
    data = data || {};
    let operationVideoPosition = data.operationVideoPosition || [];
    let videoData = {
      stationId: "",
      list: [],
    };
    operationVideoPosition.forEach((v) => {
      videoData.stationId = v.stationId;
      videoData.list.push({
        indexCode: v.videoCode,
        stationId: v.stationId,
      });
    });

    let right = this.$refs.right;
    if (right) {
      right.shipinData = videoData;
    }
  }
  stationId = "";
  stationName = "";
  SBID = "";
  SBMC = "";
  PMSID = "";
  BAYID = "";
  BAYNAME = "";
  GJSJ = "";
  GJNR = "";
  DWID = "";
  GJDJ = "";
  GLTX_URL = "";
  setCurrentData() {
    let query = this.$route.query || {};
    let stationId: any = query.BDZID;
    let stationName: any = query.BDZMC;
    let SBID: any = query.SBID;
    let PMSID: any = query.PMSID;
    let GJSJ: any = query.GJSJ;
    let GJNR: any = query.GJNR;
    let SBMC: any = query.SBMC;
    let DWID: any = query.DWID;
    let GJDJ: any = query.GJDJ;
    let BAYNAME: any = query.BAYNAME;
    let BAYID: any = query.BAYID;
    let GLTX_URL: any = query.GLTX_URL;
    this.stationId = stationId;
    this.stationName = stationName;
    this.SBID = SBID;
    this.PMSID = PMSID;
    this.GJSJ = GJSJ;
    this.GJNR = GJNR;
    this.SBMC = SBMC;
    this.DWID = DWID;
    this.GJDJ = GJDJ;
    this.BAYID = BAYID;
    this.BAYNAME = BAYNAME;
    this.GLTX_URL = GLTX_URL;
  }
  showGdpf = false;
  // 派单
  currentRow = [];
  saveend() {
    this.showGdpf = false;
  }
  paidan() {
    this.showGdpf = true;
    this.currentRow = [
      {
        GJSJ: this.GJSJ,
        BDZMC: this.stationName,
        GJNR: this.GJNR,
        BDZID: this.stationId,
        DWID: this.DWID,
        GJDJ: this.GJDJ,
        GLTX_URL: this.GLTX_URL,
      },
    ];
  }
  goBack(){
    window.history.back();
  }
}
</script>

<style lang="scss" scoped>
.jgld {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0.2rem !important;
  &-top {
    width: 100%;
    height: 0.31rem;
    // background-color: pink;
    display: flex;
    align-items: center;
    margin-bottom: 0.1rem;
    .back {
      width: 0.9rem;
      height: 0.31rem;
      margin-left: auto;
      background-image: url("../../../../assets/img/return.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
  }
  padding: 0.2rem;
  box-sizing: border-box;
  .jgld-box{
    width: 100%;
    height: calc(100% - 0.32rem);
  }
  .jgld-left {
    width: 45%;
    height: calc(100% - 0.32rem);
    flex-wrap: wrap;
    align-content: space-between;
    .modetop {
      width: 100%;
      height: calc(40% - 0.1rem);
      position: relative;
      .mode1 {
        width: calc(50% - 0.1rem);
        height: calc(40% - 0.1rem);
        position: absolute;
        top: 0rem;
        left: 0rem;
      }
      .mode2 {
        width: calc(50% - 0.1rem);
        height: calc(70% - 0.1rem);
        position: absolute;
        top: 0rem;
        right: 0rem;
      }
      .mode3 {
        width: calc(50% - 0.1rem);
        height: calc(60% - 0.1rem);
        position: absolute;
        bottom: 0rem;
        left: 0rem;
      }

      .mode4 {
        width: calc(50% - 0.1rem);
        height: calc(30% - 0.1rem);
        position: absolute;
        bottom: 0rem;
        right: 0rem;
      }
    }

    .mode5,
    .mode6 {
      width: 100%;
      height: calc(30% - 0.4rem);
    }
    .gdpf-btn {
      width: 100%;
      height: 0.4rem;
      .el-button {
        cursor: pointer;
        padding: 0 0.4rem;
      }
    }
  }
  .jgld-right {
    width: calc(55% - 0.2rem);
    height:calc(100% - 0.32rem);
  }
  .iframe-container {
    width: 100%;
    height: 80vh;
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>

